<template>
  <div class="container">
  <div class="column column-1">Column 1</div>
  <div class="column column-2">Column 2</div>
  <div class="column column-3">Column 3</div>
</div>
</template>
<!-- 当我划过"即时零售"这个图文混排的时候将剩下的图片都隐藏，只展示文字，当我划过"外卖点餐"的时候也将剩余的图片都隐藏，只展示"外卖点餐"的图文 -->

<script>
export default {

}
</script>

<style>
/* 容器设置为相对定位，方便内部绝对定位元素 */
.container {
  position: relative;
  width: 100%;
  max-width: 1280px; /* 可根据需要设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

/* 列布局 */
.column {
  box-sizing: border-box; /* 包含边框和内填充计算宽度 */
  float: left; /* 使用浮动布局 */
  width: 33.33%; /* 每列占总宽度的1/3 */
  padding: 1rem; /* 添加内间距，可自定义 */
}

/* 响应式断点（可根据实际需求调整） */
@media screen and (max-width: 768px) {
  .column {
    width: 50%; /* 小于768px时，每列占总宽度的1/2 */
  }
}

@media screen and (max-width: 480px) {
  .column {
    width: 100%; /* 小于480px时，每列占满一行 */
  }
}
</style>